<!--
Template Name: mixTable
Create author: qinglong
Create Time  : 2020-12-16
-->
<template>
  <el-table class="mix-table" v-loading="getLoading" element-loading-text="拼命加载中" height="100%" size="small" :header-row-style="elTableHeadRow" row-key="id" :fit="true" border v-bind="$attrs" v-on="$listeners">
    <template v-for="(item,index) in fields">
      <el-table-column v-if="['index','selection','expand'].includes(item.type)" :key="index" v-bind="item" align="center" />
      <el-table-column v-else-if="item.k" :key="index" v-bind="item">
        <template slot-scope="{ row, column, $index }">
          <template v-if="item.k === 'button'">
            <template v-if="Array.isArray(item.option)">
              <template v-for="(k,i) in item.option">
                <el-switch v-if="k.type=='switch'" v-model="row[k.prop]" :key="`${index}-${i}`" :inactive-text="k.label" :active-value="item.activeValue" :inactive-value="item.inactiveValue" :disabled="k.disabled" @change="handleClick(k,row,column,$index)" />
                <el-button v-else :key="`${index}-${i}`" v-bind="k" @click="handleClick(k, row, column, $index)">{{k.label}}</el-button>
              </template>
            </template>
            <el-button v-else v-bind="item" @click="handleClick(item, row, column, $index)">{{item.label}}</el-button>
          </template>
          <template v-if="item.k === 'manage'">
            <el-dropdown @command="handleClick($event, row, column, $index)">
              <el-button type="primary">
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(k,i) in item.option" :key="`${index}-${i}`" :command="k">{{k.label}}</el-dropdown-item>
                <el-dropdown-item></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-if="item.k === 'array'">
            <span>{{row[item.prop].join('，')}}</span>
          </template>
          <template v-if="item.k === 'boolean'">
            <span>{{getBoolean(item,row)}}</span>
          </template>
          <template v-if="item.k === 'date'">
            <span>{{format(item,row)}}</span>
          </template>
          <template v-if="item.k === 'image'">
            <el-image :src="row[item.prop]" :alt="item.label" style="height: 20px">
              <div slot="error" style="height:20px">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </template>
      </el-table-column>
      <el-table-column v-else :key="index" v-bind="item||{}" show-overflow-tooltip />
    </template>
  </el-table>
</template>
<script>
import formatDate from "@/utils/formatTime";
export default {
  name: "mixTable",
  props: {
    fields: {
      type: Array,
      required: true
    }
  },
  data() {
    return { timer: 0, loading: true, elTableHeadRow: { color: "#333333", backgroundColor: "#f2f6fa !important" } };
  },
  computed: {
    getLoading() {
      if (this.$attrs.data.length || !this.loading) return false;
      return true;
    }
  },
  mounted() {
    this.timer = setTimeout(() => {
      this.loading = false;
      clearTimeout(this.timer);
    }, 500);
  },
  methods: {
    getBoolean(item, row) {
      if (item.option) {
        let data = item.option.find((e) => e.value === row[item.prop]);
        if (data) data.label;
      } else {
        return row[item.prop] ? "是" : "否";
      }
    },
    getShow(item, row) {
      if (typeof item.isShow == "function") return item.isShow(row, item);
      if (item.isShow === undefined) return true;
      return item.isShow;
    },
    handleIf(a, b, c, d) {
      if (a === b) return c;
      return d;
    },
    handlerSelectable($event, item) {
      console.log($event, item);
      return true;
    },
    handleClick(item, row, ceil, index) {
      let fn = () => {};
      if (item.click && item.click.constructor === Function) fn = item.click;
      else if (item.click && item.click.constructor === String) fn = this.$parent[item.click];
      else if (item.change && item.change.constructor === Function) fn = item.change;
      else if (item.change && item.change.constructor === String) fn = this.$parent[item.change];
      fn({ row, ceil, index });
    },
    format(item, row) {
      let val = row[item.prop];
      let formatVal = item.format;
      return formatDate(val, formatVal);
    }
  },
  beforeDestroy() {
    console.log("清空定时器");
    clearTimeout(this.timer);
  }
};
</script>
<style scoped>
.mix-table {
  flex: 1 1 auto;
}
</style>